<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志管理</title>
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='sidebar.css') }}">
</head>
<body>
    <div class="topbar">
        // ... existing code from console.html's topbar ...
    </div>
    <div class="sidebar">
        // ... existing code from console.html's sidebar ...
    </div>
    <div class="divider"></div>
    <div class="container" style="margin-top: 120px;">
        <div class="log-viewer">
            <h2>日志查询</h2>
            <form id="logFilterForm" method="get">
            </form>
            <div class="log-display-area" style="height: 60vh; overflow-y: auto; margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px);">
                <ul id="logContent"></ul>
            </div>
        </div>

    </div>
    <script>
        // 获取日志内容
        function fetchLogs() {
            fetch('/api_logs')
                .then(response => response.json())
                .then(data => {
                    const logContent = document.getElementById('logContent');
                    logContent.innerHTML = '';

                    // 按行分割日志内容
                    const lines = data.content.split('\n');

                    // 逐行显示日志
                    lines.forEach(line => {
                        if (line.trim()) {
                            const li = document.createElement('li');
                            li.style.padding = '5px 0';
                            li.style.borderBottom = '1px solid #eee';

                            // 根据日志级别添加不同样式
                            if (line.includes('ERROR')) {
                                li.style.color = '#ff4d4f';
                            } else if (line.includes('WARNING')) {
                                li.style.color = '#faad14';
                            } else if (line.includes('INFO')) {
                                li.style.color = '#1890ff';
                               }

                            li.textContent = line;
                            logContent.appendChild(li);
                        }
                    });

                    // 自动滚动到底部
                    logContent.scrollTop = logContent.scrollHeight;
                })
                .catch(error => console.error('获取日志失败:', error));
        }

        // 页面加载时获取日志
        document.addEventListener('DOMContentLoaded', () => {
            fetchLogs();

            // 每5秒刷新一次日志
            setInterval(fetchLogs, 5000);
        });
    </script>
</body>
</html>